<template>
  <div class="bg_box" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
    <div class="appletCategory">
      <div style="margin-top: 15px">
        <!-- <span
          style="
            display: inline-block;
            width: 4px;
            height: 15px;
            background-color: #2589ff;
          "
        ></span> -->
        <span style="font-weight: bold;font-size: 14px;" class="big_title_style">基本信息</span>
        <div class="show_info_box">
          <div class="show_info_title">公众号名称</div>
          <div class="show_info_content">
            <span class="show_info_1 show_info_height">{{
                nickName
              }}</span>
              <div class="show_info_3">
                <span class="appletCategoryState" v-if="verifyTypeInfo != null && verifyTypeInfo != '-1'">已认证</span>
                <span class="appletCategoryState1" v-else-if="verifyTypeInfo != null && verifyTypeInfo == '-1'">未认证</span>
              </div>
          </div>
        </div>
        <!-- <div style="border-bottom: 1px solid rgb(227, 226, 229)"></div> -->
        <div class="show_info_box">
          <div class="show_info_title">Appid</div>
          <div class="show_info_content">
            <span class="show_info_1 show_info_height">{{
              appid
            }}</span>
          </div>
        </div>
        <!-- <div
          style="border-bottom: 1px solid rgb(227, 226, 229)"
        ></div> -->
        <div class="show_info_box">
          <div class="show_info_title">商户id</div>
          <div class="show_info_content">
            <span v-if="subMchid" class="show_info_1 show_info_height">{{
              subMchid
            }}</span>
            <span v-else class="show_info_1 show_info_height">未设置</span>
          </div>
        </div>
        <!-- <div style="border-bottom: 1px solid rgb(227, 226, 229)"></div> -->
        <div v-if="headImg" class="show_info_box">
          <div class="show_info_title">公众号头像</div>
          <div class="show_info_content">
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              class="show_info_1"
            >
              <img
                style="border-radius: 50%; width: 100%; height: 100%"
                :src="headImg"
              />
              <div slot="reference" class="headImg">
              <img
                style="border-radius: 50%; width: 100%; height: 100%"
                :src="headImg"
              />
            </div>
            </el-popover>
            <span class="show_info_2">一年内可申请修改5次</span>
            <a class="headImgBtn show_info_3" @click="editAvatar">修改头像</a>
          </div>
        </div>
        <!-- <div style="border-bottom: 1px solid rgb(227, 226, 229)"></div>        -->
        <div v-if="iframeStr" class="show_info_box">
          <div class="show_info_title">微信公众号</div>
          <div class="show_info_content" style="padding: 14px 15px 2px">
            <el-popover
              placement="top-start"
              width="200"
              trigger="hover"
              style="position: relative; left: -10px"
            >
              <div v-html="iframeStrs"></div>
              <div slot="reference" class="QRcode">
                <div v-html="iframeStr"></div>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
      <!-- <div
        style="width: 100%; border: 1px solid #e3e2e5;"
      ></div> -->
      <div class="more_opt_btn">
        <a
          class="el-icon-document-copy icon"
          style="margin: 0 30px 0 0"
          @click="again"
          ><span class="iconSpan">重新授权</span></a
        ><a class="el-icon-link icon" @click="jurisdiction"
          ><span class="iconSpan">已授权权限</span></a
        >
      </div>
      <!-- <div
        style="width: 100%; border: 0.5px solid #e3e2e5; margin-top: 30px"
      ></div> -->
      <div style="margin-top: 20px; width: 100%; position: relative" v-if="false">
        <div style="display:flex;align-items: flex-end">
          <span style="font-weight: bold;font-size: 14px" class="big_title_style">违规记录</span>
          <span style="color: #595961; font-size: 12px; margin-left: 10px"
            >违规记录里记录了公众号的违规情况，运营者可随时进行查看，以更清晰了解账号违规情况。</span
          >
        </div>
        <div class="experience">
          <div
            style="
              width: 100%;
              height: 100%;
              background-color: #fff;
              padding: 10px 0;
            "
          >
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              empty-text="暂无违规记录"
            >
              <el-table-column
                prop="illegal_record_id"
                label="记录ID"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="illegal_reason"
                label="违规类型"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="create_time"
                label="违规时间"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="illegal_record_id"
                label="申诉记录"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button type="text" @click="appeal(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column prop="rule_name" label="违规内容" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="appealBtn(scope.row)"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- <div
        style="width: 100%; border: 0.5px solid #e3e2e5; margin-top: 30px"
      ></div> -->
      <div
        style="margin-top: 20px; width: 100%; position: relative"
        v-if="appealData & false"
      >
        <div style="display:flex;align-items: flex-end">
          <span style="font-weight: bold;font-size: 14px" class="big_title_style">申诉记录</span>
          <span style="color: #595961; font-size: 12px; margin-left: 10px"
            >申诉记录里记录了公众号的申诉情况，运营者可随时进行查看，以更清晰了解账号申诉情况。</span
          >
        </div>
        <div class="experience">
          <div
            style="
              width: 100%;
              height: 100%;
              background-color: #fff;
              padding: 10px 0;
            "
          >
            <el-table
              border
              :data="appealData"
              style="width: 100%"
              empty-text="暂无申诉记录"
            >
              <el-table-column
                prop="appealRecordId"
                label="申诉单ID"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="appealTime"
                label="申诉时间"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="appealCount"
                label="申诉次数"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="appealStatus"
                label="申诉状态"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="auditTime" label="审核时间" align="center">
              </el-table-column>
              <el-table-column
                prop="auditReason"
                label="审核结果"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="punishDescription"
                label="处罚原因"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-button
          class="AppletsBindbtn"
          @click="$emit('Next', null)"
          ><span class="AppletsBindbtnIcon"></span><span>下一步</span></el-button>
    </div>

    <el-dialog
      title="类目管理"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <div style="font-size: 12px">
        请从您已设置的类目中选出公众号提交审核时需要的类目，微信审核时若您的公众号内容涉及未选中的类目，则公众号可能审核失败。最多可选择5个类目，未选择时将随机选取。
      </div>
      <el-cascader-panel
        style="margin-top: 10px"
        :options="options"
        @change="handleSubCat"
      ></el-cascader-panel>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRequest">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="授权权限列表"
      :visible.sync="dialogShow"
      width="400px"
      :before-close="CloseShow"
    >
      <div style="display: flex; flex-wrap: wrap; margin-left: 20px">
        <div
          style="width: 49%; font-size: 12px"
          v-for="(item, index) in funcInfo"
          :key="index"
        >
          <span
            class="el-icon-finished"
            style="color: #2589ff; font-weight: bold; margin-right: 10px"
          ></span
          >{{ item.funcinfoName }}
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="请您注意"
      :visible.sync="dialogagain"
      width="300px"
      :before-close="Closeagain"
    >
      <div style="color: #333333; font-size: 14px">
        <div>1、重新授权时不可换绑其他微信公众号 ，否则重新授权将失败；</div>
        <div style="margin-top: 10px">
          2、为保证您在文嘟嘟功能的正常使用，授权时请保持默认选择，把开放平台账号管理权限统一授权给文嘟嘟。
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogagain = false">取 消</el-button>
        <el-button type="primary" @click="authorizationAgain">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改头像" :visible.sync="editAvatarDialog" width="40%">
      <el-row type="flex" justify="center">
        <div class="cropper">
          <vueCropper
            ref="cropper"
            :img="form3.imgurl"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="option.info"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixedBox="option.fixedBox"
            @realTime="realTime"
          ></vueCropper>
        </div>
        <div class="previewBox">
          <div :style="previews.div" class="preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
          <el-row type="flex" justify="center">
            <imageUpload
              :imageStr.sync="form3.headImgMediaId"
              :imageurl.sync="form3.imgurl"
            />
          </el-row>
          <br />
          <el-row>
            <el-button
              icon="el-icon-plus"
              circle
              size="mini"
              @click="changeScale(1)"
            ></el-button>
            <el-button
              icon="el-icon-minus"
              circle
              size="mini"
              @click="changeScale(-1)"
            ></el-button>
            <el-button
              icon="el-icon-download"
              circle
              size="mini"
              @click="down('blob')"
            ></el-button>
            <el-button
              icon="el-icon-refresh-left"
              circle
              size="mini"
              @click="rotateLeft"
            ></el-button>
            <el-button
              icon="el-icon-refresh-right"
              circle
              size="mini"
              @click="rotateRight"
            ></el-button>
          </el-row>
        </div>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editAvatarDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveEditAvatar">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addcategoryRequest,
  deletecategoryRequest,
  getcategoryRequest,
  saveTemporaryMaterialRequest,
  getAuthorizerInfo,
  appletGrant,
  bindTesterRequest,
  getbindTesterRequesr,
  unbindTesterRequest,
  getallcategoriesRequest,
  getillegalrecordsRequest,
  modifyheadimageRequest,
  getappealrecordsRequest,
  isBindThirdParty
} from "@/api/applet/authorization";
import { getPlatFromId } from "@/api/applet/authorization";
import { VueCropper } from "vue-cropper";
import ImageUpload from "@/components/ImageUpload/wechatallWorkUpload";
export default {
  name: "Info",
  components: { VueCropper, ImageUpload },
  data() {
    return {
      loading: true,
      MiniProgramInfo: null,
      appealData: null,
      iframeStr: null,
      iframeStrs: null,
      verifyTypeInfo: null,
      nickName: "",
      qrcodeUrl: "",
      headImg: "",
      appid: null,
      tableData: null,
      options: null,
      Delexperience: false,
      Delvisible: false,
      dialogexperience: false,
      experienceId: "",
      experience: [],
      platformids: "",
      editAvatarDialog: false,
      previews: {},
      form3: {},
      option: {
        pointData: {
          x1: "",
          y1: "",
          x2: "",
          y2: "",
        }, // 裁剪框的坐标数据
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        full: true, // 输出原图比例截图 props名full
        outputType: "png", // 裁剪生成额图片的格式
        canMove: true, // 能否拖动图片
        original: false, // 上传图片是否显示原始宽高
        canMoveBox: true, // 能否拖动截图框
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true, // 截图框固定大小
      },
      funcInfo: null,
      ischecked: true,
      CategoryData: [],
      checkboxGroup: [],
      dialogVisible: false,
      dialogagain: false,
      dialogShow: false,
      unbindtitle: "",
      unbindopen: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: [],
      unbinform: {},
      img: "",
      SubCat: [],
      authorizationType: "",
      subMchid: "",
    };
  },
  created() {
    this.authorizationType = "allwork";
    this.getcategoryclick();
    this.getbindTesterclick();
    this.getisBindThirdParty();
  },
  methods: {
    getisBindThirdParty(){
      isBindThirdParty(this.authorizationType).then((response) => {
        this.subMchid = response.merchantId;
      });
    },
    getCommercial(CommercialData) {
      this.auditState = CommercialData.auditState;
      this.businessCode = CommercialData.businessCode;
      this.merchantShortname = CommercialData.merchantShortname;
      // this.subMchid = CommercialData.subMchid;
    },
    appealBtn(row) {
      window.open(row.rule_url, "_blank");
    },
    appeal(row) {
      // getappealrecordsRequest(
      //   row.illegal_record_id,
      //   this.authorizationType
      // ).then((response) => {
      //   this.appealData = response;
      // });
    },
    popconfirm(item) {
      deletecategoryRequest(
        item.first,
        item.second,
        this.authorizationType
      ).then((response) => {
        if (response == 0) {
          this.msgSuccess("删除成功");
        } else {
          this.msgError("删除失败");
        }
        this.getcategoryclick();
      });
    },
    handleSubCat(value) {
      // 获取value值
      this.$set(this.SubCat, "first", value[0]);
      this.$set(this.SubCat, "second", value[1]);
    },
    getWX() {
      window.open("https://www.kancloud.cn/lhjdevil/usoft/2323202", "_blank");
    },
    modifyCategory() {
      window.open("https://mp.weixin.qq.com/", "_blank");
    },
    getRequest() {
      window.open("https://www.kancloud.cn/lhjdevil/usoft/2323201", "_blank");
      // getallcategoriesRequest().then((response) => {
      //   this.options = response;
      //   for (let i = 0; i < this.options.length; i++) {
      //     if (this.options[i].children.length == 0) {
      //       delete this.options[i].children;
      //     }
      //     for (let k = 0; k < this.options[i].children.length; k++) {
      //       if (this.options[i].children[k].children.length == 0) {
      //         delete this.options[i].children[k].children;
      //       }
      //     }
      //   }
      // });
      // this.dialogVisible = true;
    },
    getbindTesterclick() {
      getbindTesterRequesr(this.authorizationType).then((response) => {
        this.experience = response;
      });
    },
    DelExperience() {
      unbindTesterRequest(this.experienceId, this.authorizationType).then(
        (response) => {
          if (response == -1) {
            this.msgError("系统繁忙，请稍后再试");
          } else if (response == 0) {
            this.msgSuccess("删除成功");
          }
        }
      );
      this.Delexperience = false;
      this.experienceId = "";
      this.getbindTesterclick();
    },
    AddExperience() {
      bindTesterRequest(this.experienceId, this.authorizationType).then(
        (response) => {
          if (response == -1) {
            this.msgError("添加失败");
          } else if (response == 0) {
            this.msgSuccess("添加成功");
          } else if (response == 85001) {
            this.msgError("微信号不正确");
          } else if (response == 85004) {
            this.msgError("微信号已绑定");
          }
        }
      );
      this.Closeexperience();
      this.getbindTesterclick();
    },
    Closeexperience() {
      this.dialogexperience = false;
      this.experienceId = "";
    },
    DelCloseexperience() {
      this.experienceId = "";
      this.Delexperience = false;
    },
    handleBeforeUpload(file) {
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          this.uploadFileUrl = process.env.VUE_APP_BASE_API+
            "/wechat/applet/saveTemporaryMaterial?platformid=" +
            this.platformids;
          resolve();
        });
      });
    },
    // 保存头像修改
    saveEditAvatar() {
      this.pointData = this.compute();
      let imgData = {};
      this.$set(imgData, "headImgMediaId", this.form3.headImgMediaId.media_id);
      this.$set(imgData, "x1", this.pointData.x1);
      this.$set(imgData, "x2", this.pointData.x2);
      this.$set(imgData, "y1", this.pointData.y1);
      this.$set(imgData, "y2", this.pointData.y2);
      this.$set(imgData, "authorizationType", this.authorizationType);
      modifyheadimageRequest(imgData).then((response) => {
        if (response == 0) {
          this.$message.success("保存成功");
        } else if (response == 53202) {
          this.msgError("本月修改次数已用完");
        } else {
          this.msgError("保存失败");
        }
      });
      this.editAvatarDialog = false;
      this.getcategoryclick();
    },
    // 放大/缩小
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    // 左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    // 右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight();
    },
    // 实时预览函数
    realTime(data) {
      this.previews = data;
      this.previews.url = this.form3.imgurl;
      let imgAxis = this.$refs.cropper.getImgAxis();
      let cropAxis = this.$refs.cropper.getCropAxis();
      let cropImgX = cropAxis.x1 - imgAxis.x1,
        cropImgY = cropAxis.y1 - imgAxis.y1,
        imgWidth = imgAxis.x2 - imgAxis.x1,
        imgHeight = imgAxis.y2 - imgAxis.y1;
      this.cropData = {
        offX: cropImgX,
        offY: cropImgY,
        cropW: data.w,
        cropH: data.h,
        imgW: imgWidth,
        imgH: imgHeight,
      };
    },
    compute() {
      let x = this.cropData.offX,
        y = this.cropData.offY,
        w = this.cropData.cropW,
        h = this.cropData.cropH,
        W = this.cropData.imgW,
        H = this.cropData.imgH,
        x1 = x / W,
        y1 = y / H,
        x2 = (x + w) / W,
        y2 = (y + h) / H;
      if (x < 0) {
        if (w + x < 0) {
          return false;
        } else {
          x1 = 0;
        }
      }
      if (x > W - w) {
        if (x > W) {
          return false;
        } else {
          x2 = 1;
        }
      }
      if (y < 0) {
        if (y + h < 0) {
          return fasle;
        } else {
          y1 = 0;
        }
      }
      if (y > H - h) {
        if (y > H) {
          return false;
        } else {
          y2 = 1;
        }
      }
      return {
        x1: x1,
        y1: y1,
        x2: x2,
        y2: y2,
      };
    },
    // 下载图片
    down(type) {
      var aLink = document.createElement("a");
      aLink.download = "author-img";
      if (type === "blob") {
        this.$refs.cropper.getCropBlob((data) => {
          aLink.href = window.URL.createObjectURL(data);
          aLink.click();
        });
      } else {
        this.$refs.cropper.getCropData((data) => {
          aLink.href = data;
          aLink.click();
        });
      }
    },

    editAvatar() {
      this.editAvatarDialog = true;
      this.form3.imgurl = this.headImg;
    },
    authorizationAgain() {
      let indexUrl = process.env.VUE_APP_BASE+"/store/applet/appletViolations";
      let authorizationStatus = "0";
      appletGrant(indexUrl, this.authorizationType,authorizationStatus).then((response) => {
        console.log("重新授权",indexUrl);
        let url = response.data.grantUrl;
        window.location.href = url;
      });
    },
    again() {
      this.dialogagain = true;
    },
    jurisdiction() {
      this.dialogShow = true;
    },
    Closeagain() {
      this.dialogagain = false;
    },
    CloseShow() {
      this.dialogShow = false;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    getcategoryclick() {
      getAuthorizerInfo(this.authorizationType).then((response) => {
        this.MiniProgramInfo = response.MiniProgramInfo;
        this.nickName = response.nickName;
        this.form = response.getcategory;
        this.qrcodeUrl = response.qrcodeUrl + "?wx_fmt=jpeg";
        let imgid = Math.random(),
            frameid = 'frameimg' + imgid;
          window['img' + imgid] = '<img id="img" style="width:40px;height:40px" src=\'' + this.qrcodeUrl + '?kilobug\' />' +
            '<script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\') }<' + '/script>';
          this.iframeStr = '<iframe id="' + frameid + '" src="javascript:parent[\'img' + imgid + '\'];" frameBorder="0" scrolling="no" width="50px" height="50px" margin:0px;></iframe>'

          let imgids = Math.random(),
            frameids = 'frameimg' + imgid;
          window['img' + imgids] = '<img id="img" style="width:200px;height:200px;position: relative;top:-20px;left:-20px;" src=\'' + this.qrcodeUrl + '?kilobug\' />' +
            '<script>window.onload = function() { parent.document.getElementById(\'' + frameids + '\') }<' + '/script>';
          this.iframeStrs = '<iframe id="' + frameids + '" src="javascript:parent[\'img' + imgids + '\'];" frameBorder="0" scrolling="no" width="200px" height="170px" margin:0px;></iframe>'
        this.headImg = response.headImg;
        this.funcInfo = response.funcInfo;
        this.appid = response.appid;
        this.loading = false
        this.verifyTypeInfo = response.verifyTypeInfo;
      });
      // getillegalrecordsRequest(this.authorizationType).then((response) => {
      //   this.tableData = response;
      //   let util = require("@/utils/util.js");
      //   if (this.tableData) {
      //     this.tableData.forEach((i) => {
      //       i.create_time = util.js_date_time(i.create_time);
      //     });
      //   }
      // });
    },

    /** 添加类目 */
    submitRequest() {
      addcategoryRequest(
        this.SubCat.first,
        this.SubCat.second,
        this.authorizationType
      ).then((response) => {
        this.msgSuccess("添加类目成功");
      });
      this.getcategoryclick();
      this.dialogVisible = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },

    // 取消按钮
    unbindcancel() {
      this.unbindopen = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.show_info_box {
  display: flex;
  align-items: center;
  .show_info_title {
    font-size: 14px;
    color: #999;
    width: 140px;
  }
  .show_info_content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 15px;
    .show_info_1 {
      font-size: 14px;
      color: #333;
      flex: 1;
      margin-right: 30px;
      line-height: 24px
    }
    .show_info_height {
      line-height: 40px;
    }
    .show_info_cate_list {
      &:not(:last-child) {
        margin-bottom: 5px;
      }
    }
    .show_info_2 {
      font-size: 14px;
      color: #999;
      flex: 1;
      margin-right: 30px
    }
    .show_info_3 {
      width: 84px;
    }
  }
}
.more_opt_btn {
  padding: 30px 0;
  border-top: 1px solid #EEE;
}


.spanTxt {
  font-size: 12px;
  color: #666;
  position: absolute;
  right: 370px;
  line-height: 40px;
}
.AppletsBindbtn {
  display: inline-block;
  // margin: 20px 0 0 0;
  width: 100%;
  height: 80px;
  border-radius: 6px;
  border: 1px solid #e3e2e5;
  text-align: center;
  line-height: 60px;
  .AppletsBindbtnIcon {
    width: 22px;
    height: 26px;
    background-image: url("../../../assets/images/AppletsBindBottom.png");
    background-size: 100% 100%;
    display: inline-block;
    position: relative;
    top: 7px;
    right: 7px;
  }
}
.authorize {
  width: 100%;
  height: 569px;
  background-color: #fff;
  padding: 20px 25px;
  color: #595961;
  font-size: 14px;
  a {
    color: #1890FF;
    font-weight: bold;
    font-size: 18px;
    margin-left: 2px;
  }
}
.anliBtn {
  position: absolute;
  top: 23px;
  left: 130px;
  color: #000;
  font-size: 18px;
}
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
}
.bg_box {
  background-color: #f2f2f6;
  border-radius: 6px;
  width: 90%;
  margin: 50px auto 20px;
  padding: 10px;
  height: auto;
  min-width: 1200px;
  .appletCategory {
    border-radius: 6px;
    width: 100%;
    height: 100%;
    padding: 20px 25px 20px 25px;
    position: relative;
    background-color: #fff;
    .appletCategoryState {
      display: inline-block;
      background: #58d44d;
      color: #fff;
      width: 50px;
      height: 20px;
      font-size: 12px;
      text-align: center;
      line-height: 20px;
      position: relative;
      bottom: 1px;
      border-radius: 2px;
    }
    .appletCategoryState1 {
      display: inline-block;
      background: #d80000;
      color: #fff;
      width: 50px;
      height: 20px;
      font-size: 12px;
      text-align: center;
      line-height: 20px;
      position: relative;
      bottom: 1px;
      border-radius: 2px;
    }
    .icon {
      color: #5DA9EF;
      .iconSpan {
        color: #666;
        font-size: 14px;
        margin-left: 5px
      }
    }
  }
}
.QRcodeTitle {
  width: 150px;
  position: absolute;
  top: 15px;
  left: 270px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #595961;
}
.QRcode {
  border-radius: 6px;
  position: relative;
  bottom: 6px;
  // img {
  //   width: 40px;
  //   height: 40px;
  // }
}
#img {
  position: relative;
  top: -7px;
  left: -7px;
}
.headImgBtn {
  font-size: 14px;
  color: #1890ff;
  line-height: 40px;
}
.headImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.headImgs {
  width: 40px;
  height: 40px;
}
.experienceBtn {
  width: 90px;
  height: 30px;
  background: #1890ff;
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
}
.experience {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  margin-top: 20px;
  .experienceBox {
    display: inline-block;
    width: 310px;
    height: 100px;
    background-color: #fafafb;
    margin: 10px 0 10px 65px;
    border-radius: 6px;
    position: relative;
    img {
      width: 65px;
      height: 65px;
      margin: 15px 0 0 15px;
    }
    div {
      width: 65px;
      height: 65px;
      position: relative;
      top: -15px;
      left: 10px;
    }
    .deleteExperience {
      position: absolute;
      right: -140px;
      top: 5px;
      font-size: 14px;
      color: #acb6ca;
    }
  }
}
.previewBox {
  text-align: center;
  margin-left: 60px;
}

.preview {
  width: 150px;
  height: 150px;
  margin: 0px auto 20px auto;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #ccc;
  overflow: hidden;
}

.cropper {
  width: 260px;
  height: 260px;
}
</style>
